import React, { useState,  useEffect } from 'react';
import './FollowStats.css';  
import { useNavigate } from 'react-router-dom';
import {getFollowCount,getFanCount,getMyprofile} from '../api/userApi';

const FollowStats = () => {
 
  const [userId, setUserId] = useState(null); // 新增 userId 状态
  useEffect(() => {
    const storedUserId = localStorage.getItem('userId');
    if (storedUserId) {
      setUserId(storedUserId);
    } 
  }, []);
  const [followingCount, setFollowingCount] = useState(null);
  const [fansCount, setFansCount] = useState(null); // 新增 userId 状态

  useEffect(() => {
    if (userId) {
     getFollowCount(userId)
     .then((data) => {
       console.log('FollowCount', data); // 调试输出
       setFollowingCount(data);
     })
     getFanCount(userId)
     .then((data) => {
       console.log('FanCount', data); // 调试输出
       setFansCount(data);
     })
     .catch((error) => {
       console.error('Failed!', error);
     });
    }
  }, [userId]);

  const navigate = useNavigate();

  // 跳转到“关注”页面
  const handleFollowingClick = () => {
    navigate(`/mypage/following/${userId}`);
  };

  // 跳转到“粉丝”页面
  const handleFollowersClick = () => {
    navigate(`/mypage/followers/${userId}`);
  };

  return (
    <div className="follow-stats">
      <div className="follow-stat-item" onClick={handleFollowingClick}>
        <span className="follow-stat-label" >关注</span>
        <span className="follow-stat-count">{followingCount}</span>
      </div>
      <div className="follow-stat-divider"></div>
      <div className="follow-stat-item" onClick={handleFollowersClick}>
        <span className="follow-stat-label">粉丝</span>
        <span className="follow-stat-count">{fansCount}</span>     
      </div>
    </div>
  );
};

export default FollowStats;
